import React from 'react'
import TaskStatusBox from './task-status-box'
import { Divider,Switch, Row, Spin } from 'antd'
import { convertContent } from '../../../../../constant/lang-util'
import RefreshTool from '../../../../common/refresh-tool'
import { connect } from 'react-redux'
import { getAssignmentFinishSpeedOverview, } from '../../../../../actions/program'
import { withRouter } from 'react-router-dom'
import TopicsStatusBox from './topic-status-box'

class AssignmentsFinishSpeedOverviewBody extends React.Component {
  state = {
    isShowAll: true,
    id: -1,
    spinning: true,
    model:true
  }
  componentDidMount = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    if (user.id > 0) {
      this.props.getAssignmentFinishSpeedOverview(programId, user.id, `作业完成速度总览`, () => {
        this.setState({spinning: false})
      })
    }
  }
  componentWillReceiveProps = nextProps => {
    const {user} = nextProps
    if (this.props.user === user) {
      return false
    }
    const {programId} = this.props.match.params
    this.props.getAssignmentFinishSpeedOverview(programId, user.id, `作业完成速度总览`, () => {
      this.setState({spinning: false})
    })
  }
  refreshAssignmentFinishSpeedOverview = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    this.setState({spinning: true})
    this.props.getAssignmentFinishSpeedOverview(programId, user.id, `作业完成速度总览`, () => {
      this.setState({spinning: false})
    },false)
  }

  toAssignmentDetail = id => {
    this.setState({id, isShowAll: false})
  }

  resetStatus = () => {
    this.setState({isShowAll: true, id: -1})
  }
  getCurrentTopicTitle = assignmentsFinishSpeedOverview => {
    return assignmentsFinishSpeedOverview.find(item => item.topicId === parseInt(this.state.id))['主题']
  }
  filter = assignmentsFinishSpeedOverview=>{
    return assignmentsFinishSpeedOverview.filter(item => item.topicId === parseInt(this.state.id))
  }
  render () {
    const {isShowAll, spinning,model} = this.state
    const {assignmentsFinishSpeedOverview} = this.props

    return <Spin size="large" spinning={spinning} tip='loading'>
      {isShowAll
        ? <div>
          <Row type='flex' justify='end'>
            <RefreshTool
              refresh={this.refreshAssignmentFinishSpeedOverview}
              refreshTime={assignmentsFinishSpeedOverview.refreshTime}
            />
          </Row>
          <Divider/>
          <TopicsStatusBox
            assignmentsFinishSpeedOverview={assignmentsFinishSpeedOverview.data}
            onChange={this.toAssignmentDetail}
          />
        </div>
        : <div>
          <a onClick={this.resetStatus}>
            {convertContent('返回')} | {this.getCurrentTopicTitle(assignmentsFinishSpeedOverview.data)}
          </a>
          <Divider type='vertical'/>
          <Switch checked={model} onChange={model => this.setState({model})} />
          <Divider/>
          <TaskStatusBox
            assignmentsFinishSpeedOverview={this.filter(assignmentsFinishSpeedOverview.data)}
            model={model}
          />
        </div>
      }
    </Spin>
  }
}

const mapStateToProps = ({assignmentsFinishSpeedOverview,userTags, user}) => ({
  assignmentsFinishSpeedOverview, user,userTags
})
const mapDispatchToProps = dispatch => ({
  getAssignmentFinishSpeedOverview: (programId, tutorId, type, callback,fromCache) => dispatch(getAssignmentFinishSpeedOverview(programId, tutorId, type, callback,fromCache)),
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentsFinishSpeedOverviewBody))
